<template>
	<view class="container">
		<view class="user">
			<uni-icons type="person" size="30" v-if="!postContent.user?.headPic"></uni-icons>
			<img class="avator" width="50" v-else :src="`${BASE_URL}/${postContent.user?.headPic}`" alt="" />
			<view class="username">
				{{ postContent.user?.nickName }}
			</view>
		</view>
		<view class="post">
			<view class="title">{{ postContent.title }}</view>
			<view class="content">{{ postContent.content }}</view>
			<view class="footer">
				<view class="createTime">
					{{ formatDate(postContent.createTime) }}
				</view>
				<view class="views">阅读 {{ postContent.views }}</view>
				<view class="likes" @click="addLikes">
					<uni-icons v-if="liked" type="hand-up-filled" size="40"></uni-icons>
					<uni-icons v-else type="hand-up" size="40"></uni-icons>
				</view>
			</view>
		</view>
		<view class="comment">
			<view class="input">
				<!-- 评论输入框 -->
				<textarea v-model="newCommentContent" maxlength="-1" placeholder="请输入评论..." class="comment-input" />
				<button type="primary" size="mini" @click="submitComment" class="submit-btn">
					<uni-icons type="paperplane" size="25"></uni-icons>
				</button>
			</view>
			<view v-if="showInputPopup" class="popup-mask" @tap="closePopup">
				<view class="popup-content" @tap.stop>
					<view class="input-box">
						<textarea v-model="newCommentContent" placeholder="请输入回复..." auto-focus class="reply-input" />
						<button v-if="newCommentContent" type="primary" size="mini" @click="submitComment" class="send-btn">发送</button>
						<button v-else type="default" size="mini" @click="closePopup" class="cancel-btn">取消</button>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="content">
					<!-- 遍历处理后的树形评论数据 -->
					<view v-for="comment in treeComments" :key="comment.id">
						<comment-item :comment="comment" :level="0" @reply="handleReply" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import CommentItem from '../../components/CommentItem/CommentItem.vue';
import { getPostDetail, addLike, createComment } from '../../api/community.js';
import { reactive, ref, computed } from 'vue';
import { formatDate } from '../../utils/common.js';
import { onReady } from '@dcloudio/uni-app';
import { BASE_URL } from '../../utils/system.js';
const comments = ref([]);

const postId = ref('');
const userId = ref('');
const liked = ref(false);
const postContent = ref({});
const newCommentContent = ref('');
const currentComment = ref(null);
const showInputPopup = ref(false);

onLoad((options) => {
	console.log(options);
	if (!options.userId) {
		uni.showToast({
			title: '请先登录',
			icon: 'none'
		});
	}
	postId.value = options.postId;
	userId.value = options.userId;
});

const showCommentInput = async (row) => {
	newCommentContent.value = '';
	showInputPopup.value = true;
	currentComment.value = row;
};
const handleReply = (parentComment) => {
	showCommentInput(parentComment.id);
};
const closePopup = (row) => {
	showInputPopup.value = false;
	newCommentContent.value = '';
	currentComment.value = null;
};

const treeComments = computed(() => {
	const map = {};
	const roots = [];

	// 创建映射表
	comments.value.forEach((comment) => {
		map[comment.id] = { ...comment, children: [] };
	});

	// 构建树形结构
	comments.value.forEach((comment) => {
		if (comment.parentId) {
			const parent = map[comment.parentId];
			if (parent) {
				parent.children.push(map[comment.id]);
			}
		} else {
			roots.push(map[comment.id]);
		}
	});

	return roots;
});

const postDetail = async () => {
	const res = await getPostDetail({ postId: postId.value, userId: userId.value });
	postContent.value = res.data;
	comments.value = res.data.comments;
	liked.value = res.data.liked;
};

const addLikes = async () => {
	const res = await addLike({
		postId: postId.value,
		userId: userId.value
	});
	liked.value = res.data.liked;
	uni.showToast({
		title: res.data.message,
		icon: 'none'
	});
};

const submitComment = async () => {
	const res = await createComment({
		content: newCommentContent.value,
		postId: postContent.value.id,
		userId: userId.value,
		parentId: currentComment.value
	});
	uni.showToast({
		title: '发送成功！',
		icon: 'success'
	});
	postDetail();
	closePopup();
};

onLoad(() => {
	postDetail();
});
</script>

<style lang="scss" scoped>
.container {
	margin: 30rpx;
	.user {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 1px solid #ccc;
		padding-bottom: 20rpx;
		.avator {
			width: 100rpx;
			height: 100rpx;
			background-color: #fff;
			border-radius: 50rpx;
		}
		.username {
			margin-left: 30rpx;
			font-size: 35rpx;
		}
	}
	.post {
		margin-top: 30rpx;
		.title {
			font-size: 40rpx;
			font-weight: 700;
			margin-bottom: 30rpx;
		}
	}
	.footer {
		margin-top: 30rpx;
		display: flex;
		justify-content: flex;
		align-items: center;
		color: #8e9091;
		.views {
			margin-left: 40rpx;
		}
		.likes {
			position: absolute;
			right: 30rpx;
		}
	}
	.comment {
		margin-top: 40rpx;
		.popup-mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 999;

			.popup-content {
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 30vh;
				background: #fff;
				border-radius: 16rpx 16rpx 0 0;
				padding: 20rpx;

				.input-box {
					display: flex;
					align-items: flex-end;
					gap: 20rpx;

					.reply-input {
						flex: 1;
						min-height: 200rpx;
						padding: 20rpx;
						border: 1px solid #eee;
					}

					.send-btn,
					.cancel-btn {
						height: 80rpx;
						line-height: 80rpx;
						margin: 0;
					}
				}
			}
		}
		.input {
			display: flex;
			margin-bottom: 20rpx;
			align-items: center;
			.comment-input {
				height: 100rpx;
				width: 90vw;
				padding: 10rpx;
				border-radius: 10rpx;
				border: 1px solid #ccc;
				font-size: 26rpx;
				resize: none;
				margin-bottom: 10rpx;
				margin-right: 10px;
			}
		}
	}
}
</style>
